<template>
  <div>
<!--    :query="tableQuery"-->
    <TableQuery
      :query="tableQuery"
      :loadTableList="loadTableList"
      :clearQuery="clearQuery"
      :queryFormHeaders="queryFormHeaders"
      :removeQueryField="removeQueryField"
      @beforeClearQuery="beforeClearQuery"
    >
      <template #departmentId>
<!--        <DepartmentTreeSelect-->
<!--          v-model="tableQuery['department.id']"-->
<!--          @changeSelectTreeNode="changeDepartment"-->
<!--        />-->
        <SysDepartmentTreeSelect
          v-model="tableQuery['department.id']"
          @change="changeDepartment"
        />
      </template>
      <template #createTimeBetween>
          <el-date-picker
            v-model="createTimeQuery"
            type="datetimerange"
            unlink-panels
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
            @change="changeCreateTimeQuery"
          />
      </template>
    </TableQuery>
  </div>
</template>

<script lang="ts" setup>
import TableQuery from '@/components/base/table/TableQuery.vue';
import SysDepartmentTreeSelect from '@/components/uem/SysDepartmentTreeSelect.vue';
// import DepartmentTreeSelect from '@/components/uem/DepartmentTreeSelect.vue';
import {
  ref, defineProps, withDefaults, watch, unref, getCurrentInstance, computed, WritableComputedRef,
} from 'vue';
import { userSexDict, userStatusDict, dictToMap } from '@/api/dict';

const { proxy } = getCurrentInstance();// 导入字典
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  query: Record<string, any>, // 查询表单对象
  loadTableList:()=>void, // 重新加载表格
  clearQuery:()=>void // 清空查询条件
  removeQueryField:(key:string)=>void // 移除查询条件中的某个元素
}
const props = withDefaults(defineProps<Props>(), {
  query: () => ({}), // 返回空对象
});

const tableQuery = computed(() => props.query);

const queryFormHeaders = [ // 查询表单
  {
    prop: 'username',
    label: '账号',
    placeholder: '请输入账户名',
  },
  {
    prop: 'nickName',
    label: '网名',
  },
  {
    prop: 'sex',
    label: '性别',
    placeholder: '请选择性别',
    list: userSexDict,
    show: false,
  },
  {
    prop: 'status',
    label: '用户状态',
    placeholder: '请选择用户状态',
    list: userStatusDict,
    show: false,
  },
  {
    prop: 'departmentId',
    propAsName: 'department.id',
    label: '部门',
    placeholder: '请选择部门',
    type: 'custom',
    show: false,
  },
  {
    prop: 'createTimeBetween',
    label: '注册时间',
    type: 'custom',
    show: false,
  },
];
const createTimeQuery = ref('');// 定义注册日期范围的变量，按照日历插件特点，该对象应该是数组
// const departmentId=ref("");
const changeCreateTimeQuery = (value:Array<string>|null) => { // 当注册日期改变时触发（点击日历确定按钮后）。当手动清空日期框时，value值为null
  if (value !== null) {
    if (value.length === 2) {
      const createTimeQueryOfBegin = value[0];
      tableQuery.value.createTimeQueryOfBegin = createTimeQueryOfBegin;// 开始日期
      const createTimeQueryOfEnd = value[1];
      tableQuery.value.createTimeQueryOfEnd = createTimeQueryOfEnd;// 截止日期
    }
  } else { // 当日期被手动清空时
    delete tableQuery.value.createTimeQueryOfBegin;// 移除属性，避免清空后查询时还会带上该参数
    delete tableQuery.value.createTimeQueryOfEnd;// 移除属性，避免清空后查询时还会带上该参数
  }
};
// 因为根据日历插件的特性，createTimeQueryOfBegin和createTimeQueryOfEnd必须同时存在，因此只要监听一个就可以。
// 注意，监听对象中的属性，只能用这种watch的写法。不能使用写法：watch(props.query.createTimeQueryOfBegin,(newVal:string,oldVal:string)=>{});
watch(() => tableQuery.value.createTimeQueryOfBegin, (newVal:string, oldVal:string) => {
  if ((typeof newVal === 'undefined' || newVal === '') && oldVal !== '') { // 如果当前值不存在并且上一个值不为空，则说明日期被清空了
    createTimeQuery.value = '';
  }
});
// 当在部门treeselect中选择了节点
const changeDepartment = (departmentId:string|null) => {
  if (departmentId === '') {
    proxy.$emit('changeTreeSelectDepartment', null);// 调用父组件，因为这里是供tree组件调用，tree组件不能直接set值为null，语法报错，这里是换技巧实现
  } else {
    proxy.$emit('changeTreeSelectDepartment', departmentId);// 调用父组件
  }
  props.loadTableList();// 刷新表格
};
// 当重置查询条件前先对部门进行充值
const beforeClearQuery = () => {
  // 调用父组件清空左侧的部门选择
  proxy.$emit('changeTreeSelectDepartment', null);
};
</script>
<style lang="scss" scoped>

</style>
